文章將陸續整理並更新至個人部落格。

前言

所有 inline-level elements 所生成的 inline-level boxes 皆會參與行內格式化上下文(IFC)，在 IFC 佈局環境裡的盒子，會一個一個呈現水平排列，此時會出現 line box 來容納這些 inline-level box。

由於 line box 過於複雜，今天僅討論 line box 高度的部分～

line box

摘自W3C

In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes.

The rectangular area that contains the boxes that form a line is called a line box.

在 IFC 佈局環境裡，盒子會一個接一個呈現水平排列，盒子之間可能有外距、邊框、內距，而容納這些盒子的矩形區域就是一個 line box。其實 line box 很像一行一行的概念，一個段落就是由許多 line box(行)組成。

line box 高度

在看規範定義前，先複習一下，在 inline-level box 中，非 inline box 的即為 atomic inline-level box，包括替換元素、inline-block 元素、inline-table 元素等所生成的盒子。可參考先前文章 視覺格式化模型-Box generation(中)

摘自W3C

The height of a line box is determined as follows:

The height of each inline-level box in the line box is calculated. For replaced elements, inline-block elements, and inline-table elements, this is the height of their margin box; for inline boxes, this is their 'line-height'.

The line box height is the distance between the uppermost box top and the lowermost box bottom.

也就是說，一個 line box 的高度取決於：

• 所容納的 inline-level box，其中 inline-level box 又可分為 inline box 與 atomic inline-level box 兩種。

  • 若是 inline box，例如display: inline
    ⇒ 僅取決於行高(line-height)，不包含 padding、border、margin。

  • 若是 atomic inline-level box，例如替換元素 <img> 或 display: inline-block

    ⇒ 取決於 box model 高度，即包含 margin 部分。

    註：
    ① box model 高度為內容區高度 + 上下內距 +上下邊框 + 上下外距。
    ② 其它替換元素

• 一個 line box 高度為位置最高的 inline-level box 頂部與位置最低的 inline-level box 底部的距離。
  
  

來看個例子吧

1. inline box 僅有 line-height 會影響 line box

<span> 預設值為 display: inline，為 inline-level element 中的 inline element，故其僅有 line-height 會影響 line box，padding、border、margin 皆不會影響 line box 高度。

<div>Lorem ipsum, dolor sit add
    <span>我在 inline box 裡面</span>
    Lorem ipsum, dolor sit amet consectetur .
</div>

div {
  width: 220px;
  margin: 200px;
  border: 1px solid #000;
}

span {
  background-color: orange;
  padding: 10px;
}

為方便觀察，給 <span> 背景橘色的顏色，並給 <span> 上下左右 padding 各 10px。
反白區域為一個 line box 高度。可以清楚看見，line box 並沒有長高，所以上下方的文字沒有被推開(但左右有)。

2. atomic inline-level box 的盒模型高度會影響 line box

現在將 <span> 設定為 display: inline-block，<span> 仍然屬於 inline-level element，但由 inline element 變成 atomic inline-level element。

span {
  display: inline-block; /* 變成 atomic inline-level */
  background-color: orange;
  padding: 10px;
}

反白區域為一個 line box 高度。可以清楚看見，line box 長高，所以上下方文字的距離也隔開了！

3. 不同 IFC 中的 line box

<div class="box">文字
  <div class="inline-block">inline-block</div>
</div>

.box {
  dispaly: block;
  width: 140px;
  outline: 1px solid #000;
  background-color: #546E7A;
  color: #eee;
  margin: 200px;
}

/* atomic inline-level 元素整個 box model 的高度皆會影響 line box 高度 */
.inline-block {
  display: inline-block; 
  outline: 1px solid #000;
  margin-top: 20px;  
  margin-bottom: 20px; 
  height: 50px;
  background-color: #FFAB00;
 }

在這個例子中，會出現兩個 line box，分別處於不同的 IFC 中。

因 display: inline-block 與文字皆為 inline-level element，生成的 box 會參與 IFC，此時就會出現 line box 來容納這些 inline-level boxes。

在 display: inline-block 的橘色矩形裡面，有一行 line box，其高度由內容「inline-block」的 line height 決定。反白區域的高度為 line box 高度。

而「文字」與 display: inline-block 的橘色矩形又會構成一個 line box，此 line box 會受到橘色矩形的 box model 高度影響，因橘色矩形為 atomic inline-level box。
反白區域的高度為 line box 高度。

註：
① display: inline-block 生成 block container box，其內容不參與外部 IFC。
② block container box 可以同時建立 BFC 與 IFC。

line box 實在非常複雜～
今天的 line box 淺談到此囉

掰拉～

以上如有理解錯誤的地方，麻煩指點指點～感恩！

參考資源

W3C-Inline formatting contexts
W3C-Line height calculations
鉄人28号FX　鉄人2号「文本士」content area